<template>
    <view-box style="background:#F3F6F7;">
      <div style="height:10px;"></div>
      <div class="width-border-baoc">
        <div style="padding:2px" v-for="(item, index) in position" :key="index">
        <group>
          <cell-box style="position: relative;font-size:16px;" v-if="item.name === '简单评估'"  @click.native="subjectBuy(item)" is-link>
            {{item.name}}
          </cell-box>
        </group>
        </div>
      </div>
      <div style="height:10px;"></div>
      <div class="width-border-baoc">
        <div  v-for="(item, index) in position" :key="index" >
        <cell-box  v-if="item.name === '完整评估'" style="position: relative;font-size:16px;" @click.native="subjectBuy(item)" is-link>
           {{item.name}}
        </cell-box>
        </div>
        <cell-box style="position: relative;font-size:16px;" @click.native="$router.push('/historical?posu=' + 'pinggu')" is-link>
           历史评估
        </cell-box>
      </div>
      <div style="height:10px;"></div>
      <div class="width-border-baoc" v-if="identity === '2'">
        <div class="backun-wid-co">
          <p style="width:50%;">
            <span>团队评估 </span>
            <span style="font-size:14px;color:#32B6C6;">¥{{TeamUnit}}</span>
          </p>
          <p style="width:50%;text-align: right;">
            <!-- <button class="left-button-p">评估码</button> -->
            <button class="right-button-p" @click="$router.push('/teamgoum')">购买</button>
          </p>
        </div>
        <div class="wid-font-size">
          <p>团队评测：购买后，你可获得十个人团队评估。</p>
        </div>
      </div>
        <!-- <div style="background: #fff;">
            <group>
                <p v-for="(item, index) in position" :key="index">
                    <cell-box style="position: relative;font-size:16px;" @click.native="subjectBuy(item)" is-link>
                        {{item.name}}
                        <p class="pos-pirc" v-if="item.is_power === 0">{{item.price}}</p>
                        <p class="pos-pirc" v-if="item.is_power === 1">已付费可以做题</p>
                    </cell-box>
                </p>
            </group>
        </div> -->

    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, Group, Cell, CellBox, XHeader } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    Group,
    Cell,
    CellBox,
    FlexboxItem,
    XHeader
  },
  data () {
    return {
      position: {},
      timeNow: '',
      identity: 0,
      TeamUnit: 0
    }
  },
  mounted () {
    this.getMyYiSort()
    this.getTeamUnit()
    this.identity = localStorage.getItem('identity')
  },
  methods: {
    getMyYiSort () {
      this.$http.get('/subjectSort').then(response => {
        this.position = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    getTeamUnit () {
      this.$http.get('/getTeamUnit').then(response => {
        this.TeamUnit = response.data
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    generateOrder (id) {
      this.loading = true
      this.$http.post('/subjectBuy', {sort_id: id}).then((response) => {
        // 订单金额为零时，不需要支付
        //   console.log(response.data.order)
        this._pay(response.data.order.id)
      }).catch((error) => {
        this.loading = false
        console.log(error)
      })
    },
    _pay (id) {
      let json = {}
      let callpay = () => {
        if (typeof WeixinJSBridge === 'undefined') {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
          }
        } else {
          onBridgeReady()
        }
      }
      let onBridgeReady = () => {
        WeixinJSBridge.invoke('getBrandWCPayRequest', json, (res) => {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            this.$router.replace('/myassessment')
            this.getMyYiSort()
          } else {
            this.getMyYiSort()
            this.$router.replace('/myassessment')
          }
        })
      }
      this.$http.get('/pay/Subject/wxpay-' + id).then((response) => {
        console.log(response.data)
        json = response.data
        callpay()
      }).catch((error) => {
        console.log(error)
      })
    },
    subjectBuy (data) {
      console.log(data.is_power)
      this.$router.push({path: '/Answer?sort=' + data.id})
    }
  }
}
</script>
<style scoped>  
    .flex-demo{
        line-height: 1rem;
        margin-bottom: 0.2rem;
    }
    .flex-demo img{
        width: 0.67rem;
        height: 0.7rem;
    }
    .flex-demo p{
        line-height: 0.3rem;
        font-size: .1728rem;
    }
    .border-nav{
        border: 1px solid #ebebeb;
        width: 96%;
        margin-left: 2%;
        border-radius: .1rem;
        box-shadow: 0px 0px 2px 0px #f3f3f3;
        background: #fff;
        margin-top: 0.3rem;
    }
    .border-nav a{
        color: #000;
    }
    .pos-pirc{
      position: absolute;
      right: 35px;
      bottom: 10px;
      color: #E93131;
    }
    .width-border-baoc{
      width: 92%;
      margin-left: 4%;
      background: #fff;
      border-radius: 7px;
    }
    .backun-wid-co{
      width: 92%;
      margin-left: 4%;
      display: flex;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #f4f4f4;
    }
    .left-button-p{
      background: #8AB0B4;
      color: #fff;
      border:1px solid #8AB0B4;
      height: 30px;
      border-radius: 10px;
      padding: 1px 10px;
    }
    .right-button-p{
      background: #32B6C6;
      color: #fff;
      border:1px solid #32B6C6;
      height: 30px;
      border-radius: 10px;
      padding: 1px 10px;
    }
    .wid-font-size{
      width: 92%;
      margin-left: 4%;
      font-size: 13px;
      padding-top: 5px;
      padding-bottom: 5px;
      color: #bababa;
    }
</style>
<style>
.width-border-baoc .vux-no-group-title {
    margin-top: 0 !important;
}
    .vux-label{
        font-size: 14px !important;
    }
    .weui-cell__ft{
        font-size: 14px;
    }
    .weui-cell_access{font-size: 14px;}
      .weui-cells:before {
    border-top: 0px solid #D9D9D9!important;
}
.weui-cells:after {
    border-bottom: 0px solid #D9D9D9!important;
}
.weui-cell:before {
    border-top: 0px solid #D9D9D9!important;
}
</style>